<script setup lang="ts">
import type { ConfigState } from '@/types/hooks/useEdit'
import EchartsOne from './components/EchartsOne.vue'
import CiYun from './components/CiYun.vue'
import LineTu from './components/LineTu.vue'
import FormTest from './components/FormTest.vue'
import { useEdit } from '@/hooks/useEdit.ts'
import { ScConstants } from '@/components/NFormBuilder/unit/ScConstants'
defineOptions({
  name: 'OperationHome',
})
const iconList = reactive([
  {
    color: '#95DE64',
    iconD: 'esayIcon-hezuo',
    title: '前日订单总数',
    num: 10,
  },
  {
    color: '#69C0FF',
    iconD: 'esayIcon-caiwu',
    title: '昨日订单总数',
    num: 0,
  },
  {
    color: '#FFC069',
    iconD: 'esayIcon-yuangong',
    title: '昨日回收数量',
    num: 0,
  },
  {
    color: '#B685EC',
    iconD: 'esayIcon-react_ts',
    title: '近7天回收数量',
    num: 0,
  },
])
const orderNum = ref({
  wait_ship_number: 0,
  pending_inspection_number: 0,
  returning_goods_number: 0,
  quoted_number: 0,
  shipped_number: 0,
  returned_goods_number: 0,
  completed_number: 0,
  cancelled_goods_number: 0,
})
const cardLift = ref([
  {
    num: 0,
    title: '前日PV',
  },
  {
    num: 0,
    title: '昨日PV',
  },
  {
    num: 0,
    title: '前日UV',
  },
  {
    num: 0,
    title: '昨日UV',
  },
])
const cardRight = ref([
  {
    num: 100,
    title: '前日新增',
  },
  {
    num: 200,
    title: '昨日新增',
  },
  {
    num: 300,
    title: '本月新增',
  },
  {
    num: 400,
    title: '用户总数',
  },
])

const handJump = (path?: string) => {
  if (!path) {
    return msgUtil.$message.warning('请配置跳转链接')
  }
}
const sc = new ScConstants(12)
const editCofig: ConfigState = {
  type: 'drawer',
  width: '80%',
  props: {
    formItems: [
      {
        ...sc.input('姓名', 'name'),
        slots: {
          suffix: () => h('span', '后缀'),
        },
      },
      sc.number('年龄', 'age'),
      sc.input('地址', 'address'),
    ],
    rules: {
      name: [
        {
          required: true,
          message: '姓名不能为空',
          trigger: 'blur',
        },
      ],
    },
  },
}
const { open } = useEdit(editCofig)
</script>
<template>
  <div class="operation">
    <n-button @click="open()">添加</n-button>
    <form-test />
    <n-grid x-gap="12" y-gap="12" :cols="24">
      <n-gi v-for="(item, index) in iconList" :key="index" :span="6">
        <n-card hoverable>
          <div class="card-box" @click="handJump()">
            <i class="esayIcon" :class="[item.iconD]" :style="{ color: item.color }"></i>
            <div>
              <div class="big-test">{{ item.title }}</div>
              <div class="num-test">
                <n-number-animation :from="0" :to="item.num" />
              </div>
            </div>
          </div>
        </n-card>
      </n-gi>
    </n-grid>
    <div class="mt-20">
      <n-grid x-gap="20" y-gap="20" :cols="24">
        <n-gi :span="24">
          <n-card hoverable>
            <template #header>
              <div class="clearfix">
                <span class="card-title">待处理事务</span>
              </div>
            </template>
            <n-grid x-gap="12" y-gap="12" :cols="24">
              <n-gi :span="8">
                <div class="middle-item" @click="handJump()">
                  <div>待用户发货订单</div>
                  <div>
                    (
                    <span style="color: red">
                      {{ orderNum.wait_ship_number }}
                    </span>
                    )
                  </div>
                </div>
                <div class="middle-item" @click="handJump()">
                  <div>待平台验货订单</div>
                  <div>
                    (
                    <span style="color: red">
                      {{ orderNum.pending_inspection_number }}
                    </span>
                    )
                  </div>
                </div>
                <div class="middle-item" style="margin-bottom: 0px" @click="handJump()">
                  <div>申请退货订单</div>
                  <div>
                    (
                    <span style="color: red">
                      {{ orderNum.returning_goods_number }}
                    </span>
                    )
                  </div>
                </div>
              </n-gi>
              <n-gi :span="8">
                <div class="middle-item" @click="handJump()">
                  <div>已揽收订单</div>
                  <div>
                    (
                    <span style="color: red">
                      {{ orderNum.shipped_number }}
                    </span>
                    )
                  </div>
                </div>
                <div class="middle-item" @click="handJump()">
                  <div>已报价订单</div>
                  <div>
                    (
                    <span style="color: red">{{ orderNum.quoted_number }}</span>
                    )
                  </div>
                </div>
                <div class="middle-item" style="margin-bottom: 0px" @click="handJump()">
                  <div>退货完成订单</div>
                  <div>
                    (
                    <span style="color: red">
                      {{ orderNum.returned_goods_number }}
                    </span>
                    )
                  </div>
                </div>
              </n-gi>
              <n-gi :span="8">
                <div class="middle-item" @click="handJump()">
                  <div>已收货订单</div>
                  <div>
                    (
                    <span style="color: red">
                      {{ orderNum.pending_inspection_number }}
                    </span>
                    )
                  </div>
                </div>
                <div class="middle-item" @click="handJump()">
                  <div>已打款订单</div>
                  <div>
                    (
                    <span style="color: red">
                      {{ orderNum.completed_number }}
                    </span>
                    )
                  </div>
                </div>
                <div class="middle-item" style="margin-bottom: 0px" @click="handJump()">
                  <div>已取消订单</div>
                  <div>
                    (
                    <span style="color: red">
                      {{ orderNum.cancelled_goods_number }}
                    </span>
                    )
                  </div>
                </div>
              </n-gi>
            </n-grid>
          </n-card>
        </n-gi>
      </n-grid>
    </div>
    <div class="mt-20">
      <n-grid x-gap="12" y-gap="12" :cols="24">
        <n-gi :span="12">
          <n-card hoverable>
            <template #header>
              <div class="clearfix">
                <span class="card-title">浏览量总览</span>
              </div>
            </template>
            <div class="bottom-div">
              <div v-for="(item, index) in cardLift" :key="index" class="bottom-item">
                <div class="bottom-item-num">
                  <n-number-animation :from="0" :to="item.num" />
                </div>
                <div class="bottom-item-title">{{ item.title }}</div>
              </div>
            </div>
          </n-card>
        </n-gi>
        <n-gi :span="12">
          <n-card hoverable>
            <template #header>
              <div class="clearfix">
                <span class="card-title">用户总览</span>
              </div>
            </template>
            <div class="bottom-div">
              <div v-for="(item, index) in cardRight" :key="index" class="bottom-item">
                <div class="bottom-item-num">
                  <n-number-animation :from="0" :to="item.num" />
                </div>
                <div class="bottom-item-title">{{ item.title }}</div>
              </div>
            </div>
          </n-card>
        </n-gi>
      </n-grid>
    </div>
    <div class="mt-20">
      <n-grid x-gap="20" y-gap="20" :cols="24">
        <n-gi :span="12">
          <line-tu />
        </n-gi>
        <n-gi :span="12">
          <line-tu />
        </n-gi>
      </n-grid>
    </div>
    <div class="mt-20">
      <n-grid x-gap="20" y-gap="20" :cols="24">
        <n-gi :span="8">
          <echarts-one />
        </n-gi>
        <n-gi :span="8">
          <ci-yun />
        </n-gi>
      </n-grid>
    </div>
  </div>
</template>
<style scoped lang="scss">
.mt-20 {
  margin-top: 20px;
}
.operation {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  .card-box {
    display: flex;
    align-items: center;
    cursor: pointer;
    i {
      margin-right: 10px;
      font-size: 70px;
    }
    .big-test {
      margin-bottom: 10px;
      font-size: 24px;
      color: #999;
    }
    .num-test {
      font-size: 20px;
      color: #333;
    }
  }
  // 卡片的标题
  .card-title {
    font-size: 24px;
    color: #333;
  }
  .middle-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 10px;
    margin-bottom: 16px;
    color: #666;
    border-bottom: 1px solid #eee;
    cursor: pointer;
  }
  // 底部卡片内容区域
  .bottom-div {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    .bottom-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .bottom-item-num {
        margin-bottom: 20px;
        font-size: 30px;
        color: red;
      }
      .bottom-item-title {
        font-size: 24px;
        color: #666;
      }
    }
  }
}
</style>
